<template>
	<view class="container">

		<view class="guess-section row-center" style="margin-top: 20px;">
			<view 
				v-for="(item, index) in goodsList" :key="index"
				class="guess-item"
				@click="navToDetailPage(item)"
				:style="(index/2)==0?'padding:0 4px 8px 8px':'padding:0 8px 8px 4px'"
			>
				<view class="image-wrapper">
					<image class="images" :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="title clamp text-ellipsis" style="padding-left: 3px;"><text>{{item.ticket_name}}</text></view>
				<view class="price"><text>￥{{item.price}}</text></view>
				<!-- <text class="price">￥{{item.price}}</text> -->
			</view>
		</view>
	
		
	
	
		<u-no-network></u-no-network>
		
	</view>
</template>

<script>

export default {
	components:{
	
	},
	data() {
		return {
	
			goodsList:[
			],
			
		};
	},
	onShow() {


	},
	onReady() {
		var _this = this;
		_this.$refs.poster.show();
	},
	onLoad() {
		this.initApp()

		
	},
	methods: {
		
		initApp(){
			var that = this
			this.$u.api.initApp().then(res => {
				res = res.data
		
				that.goodsList = res.goodsList
			})
		},
		

		navToDetailPage:function(item){
			uni.navigateTo({
				url: '/pages/scenic/ticket?product_id='+item.product_id
			})
		},
	
	}
};
</script>

<style>
page{
	background-color: #F7F7F7;
}


	/* 猜你喜欢 */
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		/* padding: 0 16upx; */
		/* background: #fff; */
		}
		.guess-section .title {
			font-size: 16px;
			color: #303133;
			line-height: 40px;
			background-color: #FFFFFF;
			
		}
	 .guess-item {
		    /* margin-right: 4%; */
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    -webkit-flex-direction: column;
	    flex-direction: column;
	    width: 50%;
	    padding-bottom: 20px;
		/* background-color: #fff; */
		border-radius: 8px;
		margin-bottom: 8px;
	}
	.image-wrapper{
		width: 100%;
		height: 330upx;
		overflow: hidden;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		
		
	}
	.images{
		width: 100%;
		height: 100%;
		opacity: 1;
	}

	.clamp {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}

	.guess-section .price {
		font-size: 16px;
		color: #fa436a;
		line-height: 1;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		background-color: #FFFFFF;
		padding: 0 0 6px 3px;
	}
	



</style>
